<template>
  <!-- <div>报关</div> -->
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
  </VTable>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import XForm from "@/components/XForm/index.vue";
import { predictionRegisterList } from "../../api.js";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      numberNo: { type: "todo" },
      dateRange: { type: "todo", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    { title: "事业部", width: 100, field: "dept" },
    { title: "申报日期", width: 160, field: "create_time" },
    { title: "系统单号", width: 200, field: "pre_tc_number" },
    { title: "SKU", width: 160, field: "sku" },
    { title: "渠道", width: 160, field: "todo" },
    { title: "发货仓库", width: 160, field: "ship_warehouse_name" },
    { title: "物流商", width: 260, field: "logistics_name" },
    { title: "品名", width: 160, field: "goods_name" },
    { title: "产品数量", width: 160, field: "todo" },
    { title: "单位", width: 160, field: "goods_unit" },
    { title: "申报货值RMB", width: 160, field: "goods_price_cny" },
    { title: "申报总金额RMB", width: 160, field: "total_amount_cny" },
    { title: "单个产品申报个数", width: 160, field: "todo" },
    { title: "报关资料名称", width: 160, field: "todo" },
    { title: "合同号", width: 160, field: "todo" },
    { title: "报关合同号（核对登记）", width: 180, field: "todo" },
    { title: "报关人", width: 160, field: "todo" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return predictionRegisterList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
//导出
const handleExport = () => {};
const actions = [
  {
    label: "导出",
    dkicon: "icon-Upload",
    fn: handleExport,
  },
];

const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "numberNo",
    placeholder: "请输入",
    type: "input",
    select: [
      { label: "SKU", value: "sku" },
      { label: "合同号", value: "todo" },
      { label: "报关合同号", value: "todo" },
      { label: "系统单号", value: "todo" },
    ],
    selectStyle: { width: "120px" },
  },
  {
    field: "todo",
    type: "select",
    class: "select-wrapper-style",
    originField: "cls_invoice_register_department",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "事业部",
    },
  },
  {
    field: "todo",
    type: "select",
    originField: "channel",
    class: "select-wrapper-style",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    options: {
      placeholder: "渠道",
      labelKey: "logistics_name",
      valueKey: "id",
    },
  },
  {
    field: "todo",
    type: "select",
    originField: "warehouse",
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    ...publicStyle,
    options: {
      placeholder: "发货仓库",
    },
  },
  {
    field: "todo",
    type: "select",
    originField: "logisticsList",
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
    options: {
      placeholder: "物流商",
      labelKey: "logistics_name",
      valueKey: "id",
    },
  },
  {
    field: "has_tax",
    type: "select",
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    originField: "has_tax",
    ...publicStyle,
    options: {
      placeholder: "是否包税",
    },
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    select: [{ label: "申报日期", value: "todo" }],
    selectStyle: { width: "100px" },
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
